<extend name="Base/common"/>
<block name="style">
    <style>
        body {
            background-color: #2B5676;
            margin-bottom: 65px;
        }
    </style>
</block>
<block name="body">
    <div class="content">
        <!--顶部选车导航-->
        <!--<div class="weui-navbar">-->
            <!--<div class="weui-navbar__item">-->
                <!--<a href="{:U('Home/Index/index')}">-->
                    <!--<img src="{$Think.config.HOME_IMG}car.png" alt=""-->
                         <!--style="width: 18px;height: 18px; padding-right: 5px;">-->
                    <!--<span >乘车</span>-->
                <!--</a>-->
            <!--</div>-->
            <!--<div class="weui-navbar__item weui-bar__item_on">-->
                <!--<a href="{:U('Home/Index/charter')}">-->
                    <!--<img src="{$Think.config.HOME_IMG}bus.png" alt="" style="width: 20px;height: 20px; ">-->
                    <!--<span >包车</span>-->
                <!--</a>-->
            <!--</div>-->
        <!--</div>-->
        <!--顶部选车导航-->

        <!--顶部图片-->
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder"><img src="{$Think.config.HOME_IMG}headers.png" alt="" style="width: 100%;">
                </div>
            </div>
        </div>
        <!--顶部图片结束-->

        <form action="{:U('Ticket/ticketQueryResult')}" method="post"><!--出发,到达城市表单-->
            <select name="from" >
                <option selected value="贵阳">贵阳</option>
                <option value="大学城">大学城</option>
                <option value="福泉">福泉</option>
            </select>
            <select name="to" >
                <option selected value="毕节">毕节</option>
                <option value="福泉">福泉</option>
            </select>
            <input type="date" name="time" value="2017-11-20">
            <hr>
            <input type="submit" value="查询车票">
        </form>
    </div>

</block>
<block name="script">
    <script type="text/javascript">

        //处理时间初始化问题
        // 网络API
        var domain = window.Think.WEB_API;
        // 出发城市数组
        var routeFromArr = [];
        var routeToArr = [];

        // 初始载入出发地，目的地和时间
        $(function () {



            // 页面载入时获取服务器数据

            //1 获取api
            var api = "Home/Api/getBookTicketsInfo";
            var targetApi = domain + api;
//        console.log(targetApi);


            //2 请求数据
            //3 添加数据到dom
            $.ajax({
                url: targetApi,
//            data: {"email": email},
                dataType: 'json',
                type: 'get',
                success: function (msg) {
//                    console.log(msg);
                    //获取数据成功
                    //便利数组
//                    console.log(msg)

                    $.each(msg['addrFrom'], function (k,v) {
                        var objFrom = {
                            "label": v,
                            "value": v
                        };

                        routeFromArr.push(objFrom);
                    });
                    $.each(msg['addrTo'], function (k,v) {
                        var objTo = {
                            "label": v,
                            "value": v
                        };

                        routeToArr.push(objTo);
                    });
                    //处理好数据
                }
            });

        });


        //       获取出发地
        (function getFromCities() {
            //出发地
            $('#showPicker').on('click', function () {
                weui.picker(routeFromArr, {
                    onChange: function (result) {
                        $("#showPicker").html(result);
                        $("#from").val(result[0]);
                    },
                    onConfirm: function (result) {
//                        console.log(result[0]);
                        $("#from").val(result[0]);
//                        console.log($('#to').val());
                    }
                });
            });
        })();

        //       获取目的地
        (function getToCities() {
            //目的地
            $('#showPicker1').on('click', function () {
                weui.picker(routeToArr, {
                    onChange: function (result) {
                        $("#showPicker1").html(result);
                        $("#to").val(result[0]);
                    },
                    onConfirm: function (result) {
//                        console.log(result[0]);
                        $("#to").val(result[0]);
//                        console.log($('#to').val());
                    }
                });
            });
        })();


        //    城市交换
        function exchangeCity() {
            var from = document.getElementById('showPicker').innerHTML;
            var to = document.getElementById('showPicker1').innerHTML;
            var fromCheck = $('#from1').html();
            var toCheck = $('#to1').html();
//        交换两个城市
            if (fromCheck == "出发" || toCheck == "到达") {
                alert("请先选择出发和到达城市");
            }
            else {
                var exchange;
                //交换两个输入框的值
                exchange = from;
                from = to;
                to = exchange;
                //输出两个值
                document.getElementById('showPicker').innerHTML = from;
                document.getElementById('showPicker1').innerHTML = to;
            }
        }


        //    选择出发时间
        function selectTheData() {
            weui.datePicker({
                start: 2012,
                end: new Date().getFullYear() + 5,
                onChange: function (result) {
                    var formateDate = result[0] + "年" + result[1] + "月" + result[2] + "日";
                    $("#inputData").val(formateDate);
                },
                onConfirm: function (result) {
//                    处理提交时间
                    var time = result[0] + '-' + result[1] + '-' + result[2];
                    $("#time").val(time);
                }
            });
        }

    </script>
</block>